<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" class="demo">
			<p>First name: {{ firstName }}</p>
			<p>Last name: {{ lastName }}</p>
			<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
	
const UserName = {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
};

const HelloVueApp = {
  components: {
    UserName,
  }
  , data() {
    return {
       firstName: '',
       lastName: '',
    };
  },
};

Vue.createApp(HelloVueApp).mount('#app')
	
		// const app = Vue.createApp({});
		// app.component("user-name", {
		// 	props: {
		// 		firstName: String,
		// 		lastName: String
		// 	},
		// 	//  emits: ['update:firstName', 'update:lastName'],
		// 	template: `
		// 		<input 
		// 		  type="text"
		// 		  :value="firstName"
		// 		  @input="$emit('update:firstName', $event.target.value)">

		// 		<input
		// 		  type="text"
		// 		  :value="lastName"
		// 		  @input="$emit('update:lastName', $event.target.value)">
		// 	  `
		// })

		// app.mount("#app");
	</script>

</html>
